<template>
    <div class="main">
        <a-form style="margin: 0 0 10px;" ref="formRef" :model="form" layout="inline" @submit="handlerSearch">
            <a-row :gutter="24">
                <a-form-item field="phone" label="邮箱" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                    <a-input :style="{ width: '100%' }" placeholder="请输入邮箱" allow-clear v-model="form.phone" />
                </a-form-item>
            </a-row>
            <a-row :gutter="24">
                <a-form-item field="status" label="状态" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                    <a-select v-model="form.status" placeholder="请选择状态">
                        <a-option v-for="(item, index) in status_list" :value="index">{{ item }}</a-option>
                    </a-select>
                </a-form-item>
            </a-row>
            <a-row :gutter="24">
                <a-form-item field="type" label="类型" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                    <a-select v-model="form.type" placeholder="请选择类型">
                        <a-option v-for="(item, index) in type_list" :value="index">{{ item }}</a-option>
                    </a-select>
                </a-form-item>
            </a-row>
            <a-row :gutter="24">
                <a-form-item field="product_id" label="数据源" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                    <a-select v-model="form.product_id" placeholder="请选择藏品数据源">
                        <a-option v-for="item in select_list" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
            </a-row>
            <div class="text-center mt-5 w-full">
                <a-space size="medium">
                    <a-button type="primary" html-type="submit">
                        <template #icon><icon-search /></template>
                        搜索
                    </a-button>
                    <a-button type="outline" @click="$refs.formRef.resetFields()">重置</a-button>
                    <a-button type="primary" @click="export_click">

                        <template #icon><icon-download /></template>
                        导出
                    </a-button>
                </a-space>
            </div>
        </a-form>
        <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">

            <template #image="{ record }">
                <a-tooltip content="查看图片">
                    <a-link @click="preview_image(record.product_cover)"><icon-image /> 查看图片</a-link>
                </a-tooltip>
            </template>

            <template #optional="{ record }">
                <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                    <a-button type="text" status="danger"><template #icon><icon-delete /></template>删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <a-image-preview :src="img_url" v-model:visible="preview_show" />
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import request from '@/api/shopproduct'
const form = reactive({
    product_id: "",
    phone: "",
    status: "",
    type: "",
});

const select_list = ref([]);
const get_select = async () => {
    let { data: { product: list } } = await request.get_select();
    select_list.value = list;
};
get_select();

const columns = [
    {
        title: '邮箱号',
        dataIndex: 'user.phone',
        ellipsis: true,
        tooltip: true,
        fixed: 'left',
        align: "center"
    },
    {
        title: '名称',
        dataIndex: 'product_name',
        align: "center"
    },
    {
        title: '封面图片',
        dataIndex: "product_cover",
        slotName: "image",
        align: "center"
    },
    {
        title: '价格',
        dataIndex: "price",
        align: "center"
    },
    {
        title: '状态',
        dataIndex: 'status_name',
        align: "center"
    },
    {
        title: '类型',
        dataIndex: 'type_name',
        align: "center"
    },
    {
        title: '日期',
        dataIndex: 'created_at',
        align: "center"
    },
    {
        title: '订单号',
        dataIndex: "order_no",
        align: "center"
    },
    {
        title: '日期',
        dataIndex: 'created_at',
        align: "center"
    },
    {
        title: '操作',
        slotName: 'optional',
        align: "center"
    },
];
const tableData = ref([]);
const pagination = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});
const getList = async () => {
    let params = {
        ...form,
        page: pagination.current,
        pageSize: pagination.pageSize
    };
    const { data: { list: { total, data } } } = await request.get_order(params);
    tableData.value = data;
    pagination.total = total;
};

const status_list = ref([]),
    type_list = ref([]);
onMounted(async () => {
    let params = {
        ...form,
        page: pagination.current,
        pageSize: pagination.pageSize
    };
    const { data: { list: { total, data }, status, type } } = await request.get_order(params);
    tableData.value = data;
    pagination.total = total;

    status_list.value = status;
    type_list.value = type;
});

const changePage = (current) => {
    pagination.current = current;
    getList();
};
const handlerSearch = () => {
    pagination.current = 1;
    tableData.value = [];
    getList()
};
const export_click = async () => {
    await request.order_export(form);
};
//放大图片
const img_url = ref('')
const preview_show = ref(false)
const preview_image = (url) => {
    img_url.value = url
    preview_show.value = true
};

const delete_item = async (id) => {
    await request.delete_order({
        ids: [id]
    });
    getList();
};
</script>

<style scope lang="scss">
.main {
    width: 100%;
    padding: 20px;
    background: #fff;
}
</style>